<template>
    <div>
        <Card>
            <!--搜索表单-->
            <Form inline onsubmit="return false">
                <FormItem>
                    <Button type="primary" @click="create()">添加</Button>
                </FormItem>
            </Form>

            <!--表格-->
            <Table border stripe :columns="columns" :data="data.records" :loading="loading"></Table>
            <!--分页-->
            <pagination :data="data" :get-data="getData"></pagination>

            <!--新增编辑表单-->
            <statementsForm ref="statementsForm" :get-data="getData"></statementsForm>

        </Card>
    </div>
</template>
<!--财务详情列表-->
<script>
    import api from '../../api';
    import pagination from '../components/pagination';
    import statementsForm from './form';
    import moment from 'moment';
    import xlsx2json from '@/libs/xlsx2json';
    import XLSX from 'xlsx';
    import {saveAs} from 'file-saver';
    import Cookies from 'js-cookie';

    export default {
//        分页和编辑
        components: {pagination, statementsForm},
        data () {
            return {
                loading: true,
                exportLoading: false,
                filters: {
                    name : '',
                },
                statementsTotal: {},
                spinShow: true,
                columns: [
                    {
                        key: 'name',
                        title: '项目名称'
                    },
                    {
                        key: 'webName',
                        title: '项目地址'
                    },
                    {
                        key: 'createdAt',
                        title: '创建时间'
                    },
                    {
                        title: '操作',
                        render: (h, params) => {
                            return h('div', [
                                this.renderEditButton(h, params),
                                this.renderDeleteButton(h, params)
                            ]);
                        }
                    }
                ],
                data: {},
                form: {},
                formRules: {
                }
            };
        },
        methods: {
            // 获取列表数据
            getData (current, size) {
                if (current) this.filters.current = current;
                if (size) this.filters.size = size;

                api.projectIndex(this.filters).then(data => {
                    this.loading = false;

                    if (data.code === 0) {
                        this.data = data.data;
                    }
                });

                this.spinShow = true;
                api.statementsTotal(this.filters).then(data => {
                    if (data.code === 0) {

                        this.statementsTotal = data.data;
                        this.spinShow = false;
                    }
                });
            },
            insertOk () {
                let request = api.projectInsert(this.form);
                request.then(data => {
                    if (data.code === 0) {
                        this.getData();
                    }
                });
            },
            // 打开新增Modal
            create () {
                this.$refs.statementsForm.open('新增');
            },
            // 删除
            destroy (id) {
                api.projectDelete({id: id}).then(data => {
                    if (data.code === 0) {
                        this.getData();
                    }
                });
            },
            // 渲染表格编辑按钮
            renderEditButton (h, params) {
                return h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    on: {
                        click: () => {
                            // 打开编辑Modal
                            this.$refs.statementsForm.open('编辑', params.row.id);
                        }
                    }
                }, '编辑');
            },
            // 渲染表格删除按钮
            renderDeleteButton (h, params) {
                return h('Poptip', {
                    props: {
                        confirm: true,
                        title: '确定是否删除?',
                        transfer: true
                    },
                    on: {
                        'on-ok': () => {
                            this.destroy(params.row.id);
                        }
                    }
                }, [
                    h('Button', {
                        style: {
                            marginLeft: '5px'
                        },
                        props: {
                            type: 'error',
                            placement: 'top',
                            size: 'small'
                        }
                    }, '删除')
                ]);
            }
        },
        // 初始化
        mounted () {
            this.getData();
        }
    };
</script>
